<template>
	<div>
		<div class="vs-table-box" v-loading="loading" style="padding: 20px 100px">
			<div class="tit">商品信息</div>
			<div class="order_info">
				<div class="order_info_top">
					<div class="img">
						<el-image v-if="form.images" style="width: 100%; height: 100%" fit="cover" :src="form.images[0]" :preview-src-list="form.images"> </el-image>
					</div>
					<div class="order_info_top_right">
						<div>商品编码 ： {{ form.goods.number }}</div>
						<div>商品系列 ： {{ form.title }}</div>
						<div>积分 ： {{ form.integral }}积分</div>
						<div>已兑换数量 ： {{ form.number }}</div>
						<div>库存数量 ： {{ form.goods.stock }}</div>
					</div>
				</div>
			</div>
			<div class="tit">商品详情</div>
			<div class="order_detail">
				<div>
					<div class="img">
						<el-image v-if="form.details_img" style="width: 100%; height: 100%" fit="cover" :src="form.details_img[0]" :preview-src-list="form.details_img"> </el-image>
					</div>
					<div class="desc">介绍：{{ form.details }}</div>
				</div>
			</div>
			<div class="vs-bottom-btns">
				<el-button @click="utils.backPage()">返回</el-button>
			</div>
		</div>
		<el-dialog :visible.sync="dialogVisible" width="500px" :before-close="dialogBeforeClose">
			<div slot="title" class="dialog_tit">
				<span v-if="orderType == 1">确认收货</span>
				<span v-else>积分商品核销</span>
			</div>
			<div style="padding: 0 40px">
				<div style="text-align: center; font-size: 16px" v-if="orderType == 1">是否确认收货？</div>
				<el-form ref="form" :model="form" v-else>
					<el-form-item>
						<div style="width: 300px; display: flex">
							<el-input v-model="input4" placeholder="请输入核销码"></el-input>
							<el-button style="margin-left: 10px">确认核销</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div slot="footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input4: '',
				tableData: [{}],
				dialogVisible: false,
				isBtn: false,
				orderType: 1, //1.待收货  2.待领取  3.已完成
				loading: false,
				form: {
					goods: {},
				},
			};
		},
		created() {
			let { id, type } = this.$route.query;
			if (id) {
				this.getIntegralGoods(id);
			}
		},
		methods: {
			tk() {
				if (this.goodsType == 1) {
					this.dialogVisible = true;
				} else {
					this.utils.goUrl('/orderRefund');
				}
			},
			subitm() {},
			async getIntegralGoods(id) {
				this.loading = true;
				let { code, data } = await this.$Http.getIntegralGoods({ id });
				this.loading = false;
				if (code) {
					this.form = data;
					this.form.details_img = data.details_img.split(',');
					this.form.images = data.images.split(',');
				}
			},
			dialogBeforeClose() {
				this.dialogVisible = false;
			},
		},
	};
</script>

<style>
	.disabled .el-upload--picture-card {
		display: none !important;
	}
</style>
<style lang="scss" scoped>
	.orderStatus {
		padding: 40px 40px;
		display: flex;
		align-items: center;

		.left_order_status {
			display: flex;
			align-items: center;

			> span {
				margin-left: 30px;
				font-size: 22px;
				color: red;
			}
		}

		.right_money {
			margin-left: auto;
			display: flex;
			align-items: center;

			> div {
				display: flex;
			}

			> div:first-child {
				margin-right: 40px;
				color: red;
			}
		}
	}

	.tit {
		margin: 20px 0;
		font-size: 16px;
		font-weight: 700;
	}

	.money {
		display: flex;
		flex-direction: column;

		> div {
			padding: 0 40px;
			margin-top: 10px;
			text-align: right;
		}
	}

	.dialog_tit {
		padding-bottom: 10px;
		border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
	}

	.order_info {
		display: flex;
		flex-direction: column;
		padding: 20px 40px;

		.order_info_top {
			display: flex;

			.img {
				height: 300px;
				width: 200px;
				background-color: rgba($color: #000000, $alpha: 0.2);
			}

			.order_info_top_right {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20px;
				padding: 15px 0;
				font-size: 14px;
				color: rgba($color: #000000, $alpha: 0.7);
			}
		}
	}
	.order_detail {
		margin-top: 40px;
		display: flex;
		align-items: center;
		justify-content: center;

		> div {
			display: flex;
			flex-direction: column;
			margin: 0 auto;

			.img {
				width: 300px;
				height: 150px;
				background-color: rgba($color: #000000, $alpha: 0.1);
			}
			.desc {
				margin-top: 10px;
				font-size: 14px;
				color: rgba($color: #000000, $alpha: 0.7);
			}
		}
	}
</style>
